<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery效果</title>
    <script src="js/jquery-1.8.3.js"></script>
    <style>
        
    </style>
    <script>
        $(document).ready(function() {
            // hide 隐藏
            $("#hide_id").click(function() {
                // $("#neijuan").hide();
                // $("#neijuan").hide("slow");
                $("#neijuan").hide(1000);
                // hidden
            });
            // show 显示
            $("#show_id").click(function() {
                // $("#neijuan").show();
                $("#neijuan").show(1000);

            });
            // toggle 切换隐藏和显示    
            $("#toggle_id").click(function() {
                // $("#neijuan").toggle();
                $("#neijuan").toggle("slow");
            });

            // slideUp向上滑动
            $("#slide_up_id").click(function() {
                $("#neijuan").slideUp();
            });

            // slideDown 向下滑动
            $("#slide_down_id").click(function() {
                $("#neijuan").slideDown();
            });

            // slideToggle 切换向上或向下滑动
            $("#slide_toggle_id").click(function() {
                $("#neijuan").slideToggle();
            });

            // fadeOut 淡出
            $("#fade_out_id").click(function() {
                $("#neijuan").fadeOut(2000);
            });

            // fadeIn 淡入
            $("#fade_in_id").click(function() {
                $("#neijuan").fadeIn(1000);
            });

            // fadeToggle 切换淡出淡入效果
            $("#fade_toggle_id").click(function() {
                $("#neijuan").fadeToggle();
            });

            // fadeTo 透明度opacity变化，从0-1
            $("#fade_to_id").click(function() {
                $("#neijuan").fadeTo(1000, 0.3);
            });

            // animate 动画效果，可以修改CSS属性
            $("#animate_id").click(function() {
                $("#neijuan").animate({
                    width: "500px",
                    opacity: "0.8"
                });
                $("#neijuan").animate({
                    height: "500px",
                    opacity: "0.5"
                });
                $("#neijuan").animate({
                    width: "300px",
                    opacity: "0.3"
                });
                $("#neijuan").animate({
                    height: "300px",
                    opacity: "0.1"
                });
            });


        });
    </script>
</head>

<body>
    <div>
        <button id="hide_id">Hide</button>
        <button id="show_id">Show</button>
        <button id="toggle_id">Toggle</button>
        <button id="slide_up_id">SlideUp</button>
        <button id="slide_down_id">SlideDown</button>
        <button id="slide_toggle_id">SlideToggle</button>
        <button id="fade_out_id">FadeOut</button>
        <button id="fade_in_id">FadeIn</button>
        <button id="fade_toggle_id">FadeToggle</button>
        <button id="fade_to_id">FadeTo</button>
        <button id="animate_id">Animate</button>
    </div>
    <br>
    <div id="neijuan" style="background-color: burlywood; font-size: 30px; width: 400px;height: 200px;border: 1px solid blue;">
        <p>
            我的室友都在睡觉，然后我偷偷把他们的手机拿过来关了闹钟，明天一早我一个人起来上课，卷死他们！！！
        </p>
    </div>

</body>

</html>